<%@page import="cfs.databean.Datapoint"%>
<%@page import="java.util.ArrayList"%>
<%
    ArrayList<Datapoint> dpList = (ArrayList<Datapoint>) request.getAttribute("dataList");
	int year = 2000;
	if(dpList !=  null && dpList.size() > 0){
		year = dpList.get(0).getYear();
	}
%>

                <!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/highcharts.js"></script>
		
		<!-- 1a) Optional: add a theme file -->
		<script type="text/javascript" src="js/themes/gray.js"></script>
		
		<!-- 1b) Optional: the exporting module-->
		<script type="text/javascript" src="js/modules/exporting.js"></script>
		
		
                
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container2',
						zoomType: 'x',
						spacingRight: 20
					},
				    title: {
						text: 'Fund Price History'
					},
				    subtitle: {
						text: document.ontouchstart === undefined ?
							'Click and drag in the plot area to zoom in' :
							'Drag your finger over the plot to zoom in'
					},
					xAxis: {
						type: 'datetime',
						dateTimeLabelFormats: { // don't display the dummy year
							month: '%e. %b',
							year: '%b'
						},
                                                title: {
							text: 'Date'
						}
                                                
					},
					yAxis: {
						title: {
							text: 'Prices'
						},
						min: 0.0,
						startOnTick: false,
						showFirstLabel: false
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								Highcharts.dateFormat('%e. %b', this.x) +': $'+ this.y;
						}
					},
					legend: {
						enabled: false
					},
					plotOptions: {
						area: {
							fillColor: {
								linearGradient: [0, 0, 0, 300],
								stops: [
									[0, Highcharts.getOptions().colors[0]],
									[1, 'rgba(2,0,0,0)']
								]
							},
							lineWidth: 1,
							marker: {
								enabled: false,
								states: {
									hover: {
										enabled: true,
										radius: 5
									}
								}
							},
							shadow: false,
							states: {
								hover: {
									lineWidth: 1						
								}
							}
						}
					},
				
					series: [{
						type: 'area',
						name: 'Price',
						//pointInterval: 24 * 3600 * 1000,
						pointStart: Date.UTC(<%=year%>, 0, 01),
						data: [ 
                                                       <%
                                                       if(dpList != null && dpList.size()>0){
                                                       for(int q=0;q<dpList.size();q++){
                                                       %>
                                                       [Date.UTC(<%=dpList.get(q).getYear()%>
                                                                     , <%=dpList.get(q).getMonth()%>, <%=dpList.get(q).getDate()%>),
                                                                 <%= dpList.get(q).getPrice() %>],                        
                                                       <%
                                                        }
                                                      }
                                                       %>
						]
					}]
				});
				
				
			});
				
		</script>